import { ChatView } from './views/ChatView.js';
import { ChatController } from './controllers/ChatController.js';
import { ConversationListView } from './views/ConversationListView.js';

export class App {
    constructor(rootElement) {
        this.rootElement = rootElement;
        this.initialize();
    }

    initialize() {
        // 设置根元素样式
        this.rootElement.className = 'h-screen flex flex-col bg-gray-50';
        
        // 创建头部
        const header = document.createElement('header');
        header.className = 'bg-white border-b border-gray-200 flex items-center h-14 flex-shrink-0';
        
        const headerContent = document.createElement('div');
        headerContent.className = 'max-w-screen-2xl mx-auto px-4 w-full flex items-center justify-between';
        
        const title = document.createElement('h1');
        title.className = 'text-lg font-semibold text-gray-800 flex items-center gap-2';
        title.innerHTML = `
            <svg class="w-6 h-6 text-blue-500" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
            </svg>
            AI 聊天助手
        `;
        
        headerContent.appendChild(title);
        header.appendChild(headerContent);
        
        // 创建内容容器
        const contentWrapper = document.createElement('div');
        contentWrapper.className = 'flex-1 overflow-hidden';
        
        // 创建主容器
        const mainContainer = document.createElement('div');
        mainContainer.className = 'h-full w-full flex';
        
        // 创建会话列表容器
        const sidebarContainer = document.createElement('div');
        sidebarContainer.className = 'w-64 flex-shrink-0';
        
        // 创建聊天区域容器
        const chatContainer = document.createElement('div');
        chatContainer.className = 'flex-1 flex flex-col overflow-hidden bg-white min-w-0';

        // 组装布局
        mainContainer.appendChild(sidebarContainer);
        mainContainer.appendChild(chatContainer);
        contentWrapper.appendChild(mainContainer);
        
        // 添加组件到页面
        this.rootElement.appendChild(header);
        this.rootElement.appendChild(contentWrapper);

        // 初始化视图
        const conversationListView = new ConversationListView(sidebarContainer);
        const chatView = new ChatView(chatContainer);
        
        // 初始化控制器
        this.controller = new ChatController(chatView, conversationListView);
    }
}